<template>
	<view class="page">
		<view style="height: 5upx;"></view>
		<view class="content">
			<view class="address" v-for="(item,index) in list" :key="index" @click="selectAddress(item)">
				<view class="address-title">
					<view>{{item.userName}}<span v-if="item.defaultFlag=='1'" class="address-default">默认</span></view>
					<view>{{item.phone}}</view>
				</view>
				<view class="address-content" >
					{{item.locationAddress}}（{{item.addressDetail}}）
				</view>
				<view class="address-menu">
					<view class="addres-menu-item" v-if="!item.defaultFlag" @click.stop="setAddress(item)">设置默认</view>
					<view class="addres-menu-item" @click.stop="editAddress(item)">修改</view>
					<view class="addres-menu-item" style="color: #e676B6;" @click.stop="deleteAddress(item)">删除</view>
				</view>
			</view>
		</view>
		<view class='placeholder-view'></view>
		<view class="btn" >
			<button type="primary" @click="editAddress()" >新增地址</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				type:0
			}
		},
		onLoad(e) {
			e.type?this.type=1:this.type=0
		},
		onShow(e) {
		   this.myUserAddress()	
		},
		methods: {
			editAddress(data){
				data?uni.navigateTo({
					url:"./add-address?item="+ JSON.stringify(data)
				}):uni.navigateTo({
					url:"./add-address"
				})
				
			},
			myUserAddress(){
				this.$api("address",'get').then(res=>{
					this.list=res.data
				})
			},
			deleteAddress(item){
				let self=this;
				uni.showModal({
					title: '删除',
					    content: '确定删除这个地址',
					    success: function (res) {
						if (res.confirm) {
							self.$api("address",'del',{id:item._id}).then(res=>{
								self.$msg("删除成功");
								self.myUserAddress();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			selectAddress(data){
				if(this.type){
					getApp().globalData.defaultAddress=data
					uni.navigateBack();
				}else{
					uni.navigateTo({
						url:"./add-address?item="+ JSON.stringify(data)
					})
				}
			},
			async setAddress(item){
				await this.$api("address","clearDefault")
				item.defaultFlag=1
				await this.$api("address","upd",item)
				if(this.type){
					getApp().globalData.defaultAddress=item
					uni.navigateBack();
				}else{
					await this.myUserAddress()
					this.$msg("设置成功");
				}
			}
		}
	}
</script>

<style >
page{
	background: #F5F5F5;
}
.content{
	overflow-y:auto; 
}

.address{
	margin: 30upx 30upx;
	background: #FFFFFF;
	padding: 30upx;
	border-radius: 20upx;
}
.address-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #222222;
	font-size: 36upx;
	font-weight: 600;
}
.address-default{
	background: #ED3F14;
	border-radius: 28upx;
	padding: 3upx 15upx;
	font-size: 28upx;
	font-weight: 500;
	color: #FFFFFF;
}
.address-content{
	margin-top: 20upx;
	margin-bottom: 20upx;
	color: #9B9B9B;
	font-size: 32upx;
	font-weight: 500;
}
.address-menu{
	border-top: solid 1px #ECECEC;
	display: flex;
	padding-top:10upx;
}
.addres-menu-item{
	flex:1;
	text-align: center;
	font-size: 36upx;
}
.placeholder-view{
	width: 100%;
	height: 150upx;
}
.btn{
	position:fixed;
	bottom: 40upx;
	left:30upx;
	width: calc(100% - 60upx) ;
}
</style>
